<template>
  <div>
    <div v-html="questionnaire"></div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdate } from '@/utils/index';
import {
  questionnaire,
  getQuestionnaireByID
} from '@/api/customerCare/saleVisit/salesVisit';
export default {
  name: 'careQuestionnaire',
  mixins: [dictionary],
  props: {
    customerCareId: String,
    questionnaireId: String,
    careStatus: Number,
    type: String,
  },
  data(){
    return {
      questionnaire: ''
    }
  },
  methods: {
    createdQuestionnaire(){
      let html = "<div id='questionnaire'>";
      let i=0;
      if(this.careStatus != 15921001){
        questionnaire({
          customerCareId: this.customerCareId,
          questionnaireId: this.questionnaireId
        }).then(res => {
          res.data.forEach(row => {
            html += this.formatQuestionnaire(row,++i);
          })
          html += "</div>";
          this.questionnaire = html;
        })
      }else{
        getQuestionnaireByID({
          questionnaireId: this.questionnaireId
        }).then(res=>{
          res.data.forEach(row => {
            html += this.formatQuestionnaire(row,++i);
          })

          html += "</div>";
          this.questionnaire = html;
        })
      }
    },
    formatQuestionnaire(row,i){
      let isMustFilled = row.isMustFilled==10041001?"*":"";
      let html = "<div questionType='"+row.questionType+"' questionName='"+row.questionName+"' questionContent='"+row.questionContent+"' answerQuestionnaireId='"+row.answerQuestionnaireId+"' answerGroupId='"+row.answerGroupId+"' id='"+row.questionId+"' isMustFilled='"+row.isMustFilled+"'>"+i+"."+isMustFilled+"问题："+row.questionName;
      let isDisabeld = this.type == 'show'?"disabled":"";
      if(row.questionType === 15711001||row.questionType === 15711002){
        html += "<div style='margin-left:20px'>";
        row.answerList.forEach(answer=>{
          let isChecked = answer.isChecked==10041001?"checked":"";
          let type = row.questionType == 15711001?"radio":"checkbox";
          html+="<label><input answerUsedId='"+answer.answerUsedId+"' answerSort='"+answer.answerSort+"' answerQuestionnaireId='"+answer.answerQuestionnaireId+"' answerId='"+answer.answerId+"' answer='"+answer.answer+"' id='"+row.questionId+"' "+isDisabeld+" "+isChecked+" name='"+row.questionId+"' type='"+type+"' value='' />"+answer.answer+" </label>";
        })
        html+="</div>";
      }else if(row.questionType === 15711003){
        if(row.value == null){
          row.value = '';
        }
        html+="<div style='margin-left:20px'><textarea "+isDisabeld+" id='"+row.questionId+"' value="+row.value+" rows='2' style='width:500px;'>"+row.value+"</textarea></div>";
      }
      html+="</div>";
      return html;
    }
  },
  created() {
    this.createdQuestionnaire();
  }
}
</script>
